<template>
  <div class="id3"></div>
</template>

<script>
import { postdata2 } from "../api/axios";
import * as echarts from "echarts";
export default {
  data() {
    return {
      scatter: [],
    };
  },
  methods: {
    post2() {
      postdata2().then(({ data }) => {
        let arr = data.data;
        var a = 0,
          b = 0,
          c = 0,
          d = 0;
        for (let i = 0; i < arr.length; i++) {
          const ai = arr[i];
          if (ai.year == 2019) {
            a += 1;
          } else if (ai.year == 2020) {
            b += 1;
          } else if (ai.year == 2021) {
            c += 1;
          } else if (ai.year == 2022) {
            d += 1;
          }
        }
        console.log("============================", a, b, c, d);
        this.scatter = [
          [2019, a],
          [2020, b],
          [2021, c],
          [2022, d],
        ];
      });
    },
    ech2() {
      var myEcharts = echarts.init(document.querySelector(".id3"));
      var option = {
        title: {
          text: "任务3",
        },
        xAxis: {},
        yAxis: {},
        series: [
          {
            type: "scatter",
            data: this.scatter,
          },
        ],
      };
      myEcharts.setOption(option);
    },
  },
  mounted() {
    this.post2();
    setTimeout(() => {
      this.ech2();
    }, 5000);
  },
};
</script>

<style scoped>
.id3 {
  width: 100%;
  height: 34.375rem;
}
</style>